<template>
	<div>
		<h1>注册666</h1>
		<el-row>
			<el-col :span="6">
				<label for="userimg">
					头像: <div class="userimg"><input style="opacity: 0;" type="file" id="userimg" name="userimg" @change="userimgchange"></div>
				</label> <br>	
					
				<label for="nickname">
					昵称: <el-input type="text" id="nickname" name="nickname" v-model="nickname"></el-input>
				</label><br>
				
				<label for="tel">
					手机: <el-input type="text" id="tel" name="tel" v-model="tel"></el-input>	
				</label><br>
				
				<label for="pwd">
					密码: <el-input type="password" id="pwd" name="pwd" v-model="pwd"></el-input>
				</label><br>
				
				<label for="sign">
					个性签名: <el-input type="text" id="sign" name="sign" v-model="sign"></el-input>
				</label><br>
				
				<label for="verif">
					验证码: <el-input type="text" id="verif" name="verif" v-model="verif"></el-input>
					<span v-html="verifserver"></span>
				</label> <br>
				<el-button type="primary" @click="regiterbtnclick">注册</el-button>
			</el-col>
		</el-row>
		
	</div>
</template>

<script setup>
	import {ref,onMounted,getCurrentInstance} from "vue"
	import {useRouter} from "vue-router"
	let router=useRouter()
	let {proxy}=getCurrentInstance()
	let userimg=ref(null)
	let userimgurl=ref("url(http://localhost:7001/server/userimg/2.png)")
	let userimgchange=(e)=>{
		userimg.value=e.target.files[0]
		userimgurl.value=`url(${window.URL.createObjectURL(e.target.files[0])})`
		console.log(userimgurl.value)
		}
	let nickname=ref("")
	let tel=ref("")
	let pwd=ref("")
	let verif=ref("")//用户输入的验证码
	let verifserver=ref("")//后端发送过来的图片
	let sign=ref("")
	onMounted(async ()=>{
		// "1.jpg"==>
		//  "/api/verif"==>'http://localhost:5173/api/verif'
		//  ==代理==> "http://localhost:7001/api/verif"
		let res=await proxy.axios("/api/verif")
		verifserver.value=res.data
		console.log(res)
	})
	
	let regiterbtnclick=async ()=>{
		if(userimg&&nickname&&tel&&pwd&&verif&&sign){
			let fdata=new FormData()
			fdata.append("userimg",userimg.value)
			fdata.append("nickname",nickname.value)
			fdata.append("tel",tel.value)
			fdata.append("pwd",pwd.value)
			// console.log(verif,verif.value,"11111111111")
			fdata.append("verif",verif.value)
			fdata.append("sign",sign.value)
			let res=await proxy.axios.post("/api/register",fdata)
			console.log(res.data)
			if(res.data.code==25){
				router.push("/login")
			}else{
				alert(res.data.info)
			}
		}else{
			alert("有字段没填")
		}
	}
	
</script>


<style scoped lang="scss">
	.userimg{
		width: 60px;
		height: 60px;
		background-image: v-bind(userimgurl);
		background-size: 60px 60px;
	}
</style>